<template>
  <!-- API调用总量 -->
  <div>
    <div style="width: 100%;height: 300px;" ref="apiTotal">
    </div>
  </div>
</template>

<script>
import { getApiTotal } from "@/utils/httpUtils";
import * as echarts from "echarts";
import { data } from "jquery";
export default {
  data() {
    return {
      tabs: [],
      activeTab: 0,
      charts: [], // 存储图表实例
      chartsList: [],
      chartsList1: [],
      themeCode: "cedfe17022e749239616f747110318ed",
    };
  },
  mounted() {
    this.initChart();
    // this.getTabs();
    // this.getSeek1();
  },

  methods: {
    // changeTab(tabIndex, code) {
    //   console.log(tabIndex, code);
    //   this.activeTab = tabIndex;
    //   this.themeCode = code;

    //   if (!this.charts[tabIndex]) {
    //     this.$nextTick(() => {
    //       this.initChart(tabIndex);
    //     });
    //   }
    //   // 传 themeCode 调列表
    //   this.getSeek1();
    // },
    // getSeek1() {
    //   getSeek({
    //     themeCode: this.themeCode,
    //     pageNo: 1,
    //     pageSize: 10,
    //   }).then((res) => {
    //     this.chartsList = res.data.totalList;
    //     console.log(this.chartsList, "列表数据");
    //     this.initCharts(); // 初始化图表并更新页面显示
    //   });
    // },

    // 服务资源
    // getList() {
    //   getSeek({
    //     themeCode: this.themeCode,
    //     pageNo: 1,
    //     pageSize: 10,
    //     type: 1,
    //   }).then((res) => {
    //     if (res.data.totalList === null) {
    //       this.chartsList1 = [];
    //     } else {
    //       this.chartsList1 = res.data.totalList;
    //       console.log(this.chartsList1, "服务资源数据");
    //     }
    //   });
    // },

    // initCharts() {
    //   this.tabs.forEach((tab, index) => {
    //     if (index === this.activeTab) {
    //       this.initChart(index);
    //     }
    //   });
    // },

    initChart() {

      let param = {
        "monitorQueryType": "Api_Usage",
        "dateFrom": "now-1w", "dateTo": "now",
        "apiId": "",
        "userId": ""
      }
      let xData = []
      let xData2 = []
      let xData3 = []
      let yData = []
      getApiTotal(param).then((res) => {
        res.monitorTimeRecords.map(function (item) {
          item.result.fail ? item.result.fail : item.result.fail = 0
          item.result.success ? item.result.success : item.result.success = 0
          item.result.total ? item.result.total : item.result.total = 0
          xData.push(item.result.fail)
          xData2.push(item.result.success)
          xData3.push(item.result.total)
          yData.push(item.time.slice(5, 10).replaceAll('-', '/'))
        })
        const chartDom = this.$refs.apiTotal;
        this.myChart = echarts.init(chartDom);

        let option = {
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: yData,
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              color: "rgba(230, 247, 255, 0.50)",
              fontSize: 16,
            },
            // y轴的分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(230, 247, 255, 0.20)",
              },
            },
          },
          series: [
            {
              data: xData,
              type: 'line',
              // stack: 'x',
              name: '失败'
            },
            {
              data: xData2,
              type: 'line',
              // stack: 'x',
              name: '成功'
            },
            {
              data: xData3,
              type: 'line',
              // stack: 'x',
              name: '总量'
            },

          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "line", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            show: true,
            data: ['失败', '成功', '总量'],
            textStyle:{
              color:"#fff",
              fontSize:"14px"
            }
          },
        };
        this.myChart.setOption(option); // 更新图表数据

      });

    },


  },
};
</script>

<style scoped>
.tabs {
  display: flex;
  color: #fff;
  font-size: 15px;
}

.tab {
  padding: 5px 8px 5px 8px;
  cursor: pointer;
  border: 1px solid #fff;
  margin-right: 10px;
}

.active {
  background-color: #198ef8;
}

.chart-container {
  width: 100%;
  height: 300px;
}
</style>
